<template>
  <div>
    <div style="margin-top: 10px; margin-bottom: 20px">
      <el-date-picker
          v-model="tvalue"
          type="date"
          placeholder="选择日期"
          format="YYYY 年 MM 月 DD 日"
          value-format="YYYY-MM-DD"
          style="margin-right: 5px">
      </el-date-picker>
      <el-select placeholder="请选择任务类型" clearable="true" style="margin-right: 5px" v-model="type">
        <el-option
            v-for="item in typecase"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px" @click = "search">查询</el-button>
      <el-button type="primary" style="" @click = "print">批量分配</el-button>
    </div>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style=" width: 100%"
          @selection-change="selectionChange"
          height="542px"
          row-key="distributionTaskOrderId"
      >
        <el-table-column reserve-selection type="selection" width="55"></el-table-column>
        <el-table-column type="index" :index="getIndex" width="100" label="序号"/>
        <el-table-column prop="distributionTaskOrderId" width="200px" label="任务号"/>
        <el-table-column prop="customerName" width="150px" label="客户姓名"/>
        <el-table-column prop="commodityId" width="200px" label="商品ID"/>
        <el-table-column prop="commodityNum" width="100px" label="商品数量"/>
        <el-table-column prop="address" width="300px" label="投递地址"/>
        <el-table-column sortable prop="overTime" width="200px" label="要求完成日期"/>
        <el-table-column prop="taskType" width="150px" label="任务类型"/>
        <el-table-column prop="taskState" width="150px" label="任务状态"/>
        <el-table-column prop="" label="操作">
          <template #default="scope">
            <el-button size="small" type="success" @click="print(scope.row)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          layout="total, prev, pager, next"
          :total=totalSize
          @current-change="pageChange"
          style="margin-top: 15px"
          :current-page=pageNow
      >
      </el-pagination>

    </el-scrollbar>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "PrintTaskList",
  data() {
    return {
      tableData:[

      ],
      status:'',
      type:'',
      typecase:['送货收款','收款','送货','退货','换货'],
      tvalue:'',
      multipleSelection:[],
      pageSize:8,
      pageNow:1,
      totalSize:100,
      type1:'',
      tvalue1:''
    }
  },
  methods:{
    search(){
      this.type1 = this.type
      this.tvalue1 = this.tvalue
      axios.post("http://localhost:1060/taskOrder/findByConditions",{
        type:this.type,
        date:this.tvalue,
        status:'完成',
        pageSize:this.pageSize,
        pageNow:1
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
        } else {
          this.tableData = []
          this.totalSize = 0
        }
      })

    },
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    forsure(){
      let length = this.multipleSelection.length;
      this.$confirm('你已选择'+length+'条数据，是否对它们进行分配操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.distribute()
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    print(row){
      console.log(row)
      let params = row
      const routeData = this.$router.resolve({
        name:'getImg'
      })
      sessionStorage.setItem('data',JSON.stringify(row))
      window.open(routeData.href,
          '__blank',
          'location=no, menubar=no,status=no,resizable=no,titalebar=yes,height=600,width=1000')

    },
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      this.$axios.post("http://localhost:1060/taskOrder/findByConditions",{
        status:'完成',
        date:this.tvalue,
        type:this.type,
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        }else {
        }

      })
    },

    loadPost(){
      this.$axios.post("http://localhost:1060/taskOrder/findByConditions",{
        date:this.tvalue1,
        type:this.type1,
        status:'完成',
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        this.pageNow = 1
        res=res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },
    selectionChange(val){
      this.multipleSelection = val
      console.log(JSON.stringify(this.multipleSelection))
    }
  },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>

</style>